<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>booking_order</title>
    <link rel="stylesheet" href="__CDN__/assets/less/reset.css">
    <link rel="stylesheet" href="__CDN__/assets/font/iconfont/iconfont.css">
    <link rel="stylesheet" href="__CDN__/assets/less/booking_order.css">

    <!-- <link rel="stylesheet" href="./components/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" href="./components/jquery-easyui-1.7.0/themes/icon.css"> -->
</head>
<body>
    <div class="order_center">
        <div class="order_center_left">
            <!-- dynamic -->
            <div class="homestay_info">
                <!-- <div class="homestay_info_left">
                    <img src="./images/booking_detail/thumbnail_img_1.jpg" alt="">
                </div>
                <div class="homestay_info_right">
                    <span class="homestay_title">双井地铁口拎包入住可日租月租</span>
                    <span class="homestay_label_group">
                        合住房间·2室1厅
                    </span>
                </div> -->
            </div>
            <div class="booking_process">
                <div class="booking_process_label">预定流程：</div>
                <div class="booking_process_main">
                    <div class="process_item">
                        <i class="iconfont icon-radio"></i>
                        <span class="process_text">支付订单</span>
                    </div>
                    <span class="process_dots">······</span>
                    <div class="process_item">
                        <i class="iconfont icon-radio"></i>
                        <span class="process_text">房东确认接单</span>
                    </div>
                    <span class="process_dots">······</span>
                    <div class="process_item">
                        <i class="iconfont icon-radio"></i>
                        <span class="process_text">预订成功</span>
                    </div>
                </div>
            </div>
            <!-- <div class="detail_prompt">
                <i class="iconfont icon-tishi"></i>
                独立房间：有独立房间，与房东或其他房客分享公共空间
            </div> -->
            <!-- dynamic -->
            <div class="date_wrap">
                <div class="check_in_date">
                    <span class="date_title_reuse">入住日期</span>
                    <input class="check_in_input form_input" type="date" readonly>
                </div>
                <div class="check_out_date">
                    <span class="date_title_reuse">退房日期</span>
                    <input class="check_out_input form_input" type="date" readonly>
                </div>
            </div>
            <div class="check_in_person">
                <span class="check_in_person_title">入住人数（请如实填写所有入住人信息及有效联系方式）</span>
                <div class="check_in_person_btn">
                    <!-- <i class="iconfont icon-lianxiren"></i> -->
                    <input class="form_input" placeholder="修改入住人数" min="1" type="number">
                </div>
                <div class="check_in_list">
                    <!-- <label class="check_in_list_title" for="">入住人：</label> -->
                    <!-- dynamic -->
                    <!-- <ul>
                        <li></li>
                    </ul> -->
                </div>
            </div>
            <div class="contacts">
                <div class="phone">
                    <label for="">联系电话</label>
                    <input type="text" class="form_input">
                </div>
                <div class="verification_code">
                    <!-- <label for="">验证码</label>
                    <div class="verification_code_operation">
                        <input type="text" class="form_input">
                        <button>获取验证码</button>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="order_center_right">
            <div class="cost_breakdown">
                <div class="cost_breakdown_title right_section_title">费用明细</div>
                <!-- dynamic -->
                <div class="cost_breakdown_main">
                    <div class="cost_all">
                        <!-- <div class="cost_all_left">全部房费（2天）</div>
                        <div class="cost_all_right">￥90</div> -->
                    </div>
                    <ul class="cost_date_list">
                        <!-- <li>
                            <span class="date">2024/04/28</span>
                            <span class="cost">￥45</span>
                        </li> -->
                    </ul>
                    <div class="total">
                        <label for="">合计：</label>
                        <span class="total_pay"></span>
                    </div>
                </div>
            </div>
            <div class="notice">
                <div class="right_section_title">注意事项</div>
                <div class="notice_main">
                    <div class="notice_item">
                        <label for="">提供发票：</label>
                        <div class="label_content">开具发票需与房东协调</div>
                    </div>
                    <div class="notice_item">
                        <label for="">退订规则：</label>
                        <div class="label_content">
                            <ol>
                                <li>入住日前一天14:00前取消订单，全额退款</li>
                                <li>距入住日14:00不足24小时取消，扣首晚房费</li>
                                <li>入住后提前离店，当日14:00前取消，扣当日房费；当日14:00后取消，扣当日+次日房费</li>
                                <!-- <li>享月租或连住优惠的房源规则详情请查看<span class="agreement">《补充退款规则》</span></li> -->
                            </ol>
                        </div>
                    </div>
                    <div class="notice_item">
                        <label for="">入住提示：</label>
                        <div class="label_content">
                            <ul>
                                <li>需2024-04-28 14:00 办理入住，早到可能需要等待。</li>
                                <li>需2024-04-30 12:00 前办理退房，如需延迟退房请与商户协商。</li>
                                <li>未到店或未入住时，请勿轻易线下转账支付押金或其他费用，以免上当受骗。</li>
                            </ul>
                        </div>
                    </div>
                    <!-- <div class="notice_item">
                        <label for="">用户协议：</label>
                        <div class="label_content">继续操作代表您同意<span class="agreement">《房客规则》</span></div>
                    </div> -->
                    <div class="notice_item">
                        <label for="">在线客服：</label>
                        <div class="label_content">微信关注"客多多短租助手"，联系在线客服</div>
                    </div>
                </div>
            </div>
            <button class="submit_order">提交订单</button>
        </div>
    </div>

    <script src="__CDN__/assets/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- <script src="./components/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <script src="./components/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script> -->
    <script type="module" src="__CDN__/assets/js/booking_order.js"></script>
</body>
</html>